<template>
	<view>
		<view class="VerticalBox">
			<!-- 分类 -->
			<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop">
				<view class="cu-item" :class="clickId == item.category_id ?'text-green cur':''" v-for="item,key in categoryList" :key="item.category_id"
				@click="toCategory(item.category_id)">
					{{item.category_name}}
				</view>
			</scroll-view>
			<!-- 右边 -->
			<scroll-view class="VerticalMain" scroll-y scroll-with-animation 
			 :scroll-into-view="thisCategory" @scroll="scroll">
			 <!-- 轮播图 -->
			 <swiper class="screen-swiper square-dot recommend" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000"
			  duration="500">
			 	<swiper-item v-for="item in recommendList" :key="item.food_id">
			 		<image :src="item.food_img" mode="aspectFill"></image>
			 	</swiper-item>
			 </swiper>
				
				<!-- 菜品列表 -->
				<view class="padding-top padding-lr category" v-for="item,key in foodList" :key="key" :id="'category_'+ key">
					<!-- 菜品内的分类 -->
					<view class="cu-bar solid-bottom bg-white">
						<view class="action">
							<text class="cuIcon-title text-green"></text> {{ key | searchCategoryName }}
						</view>
					</view>
					<view class="cu-list menu-avatar"
						v-for="_list,index in item" :key="_list.food_id">
						<view class="cu-item" id="menu">
							<image class="cu-avatar round lg" id="cu-avatar" :src="_list.food_img"></image>
							<view class="content">
								<view class="text-pink"><text class="text-cut">{{_list.food_name}}</text></view>
								<view v-if="isCanPay == 1" class="text-pink">￥{{_list.food_price}}</view>
								<view class="text-gray text-sm flex">
									<text class="text-cut">
									</text>
								</view>
							</view>
							
							<template v-if="isCanPay == 1">
								<view class="subtrcat"  @tap="reduceFood(key, index)">-</view>
								<view class="cart-count">{{_list.selected_num}}</view>
								<view class="plus"  @click="addFood(key, index)">+</view>
							</template>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<button v-if="isCanPay == 1" class='btn-red' type="primary" @click='toBuy' form-type='submit'>去结算</button>
	</view>
</template>

<script>
	import login from '@/common/login.js'
	import check from '@/common/check.js'
	let that;
	export default {
		data() {
			return {
				categoryList: [],
				foodList: [],
				recommendList: [],
				thisCategory: '',  // 当前菜品分类所在的分类id
				clickId: 0,   // 当前点击的分类id
				topList: [],
				isCanPay: 0,
				desk_id: 1
			};
		},
		onShow() {
			login.getAuth((res) => {
			},() => {})
		},
		onLoad(args) {
			if (args.desk_id) {
				this.desk_id = args.desk_id
			}
			check.checkIsCanPay(data => {
				this.isCanPay = data;
			});
			this.getCategoryList()
			this.getFoodList()
			this.getRecommendList()
		},
		onHide() {
		},
		computed: {
			orderData() {
				let list = [];
				let totalPrice = 0;
				for (let key in this.foodList) {
					for (let item of this.foodList[key]) {
						if (item.selected_num > 0) {
							item.total_price = item.selected_num * item.food_price
							totalPrice += item.total_price;
							list.push(item)
						}
					}
				}
				getApp().globalData.orderData = {
					desk_id: this.desk_id,
					user_id: uni.getStorageSync('user_id'),
					food_list: {data: list},
					order_price: totalPrice
				}
			}
		},
		onReady() {
			uni.hideLoading()
		},
		beforeCreate() {
			that = this;
		},
		filters: {
			searchCategoryName(key) {
				for (let item of that.categoryList) {
					if (key == item.category_id) {
						return item.category_name;
					}
				}
			}
		},
		methods: {
			clearSelectNum() {
				let list = this.foodList;
				for (let key in list) {
					for(let item of list[key]) {
						item['selected_num'] = 0;
					}
				}
				this.foodList = list;
			},
			toCategory(id) {
				this.thisCategory = 'category_'+ id;
				this.clickId = id;
			},
			getNodeInfo() {
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.category').boundingClientRect(data => {
					let list = [];
					data.map(item => {
						list.push(item.top)
					})
					this.topList = list;
				}).exec()
			},
			scroll(e) {
				let scrollTop = e.target.scrollTop;
				for (let i = 0; i < this.topList.length; i++) {
					let start = this.topList[i];
					let end = this.topList[i+1] || this.topList[i]+10000;  // 最后一个没有时，高度即为上一位加10000
					if (scrollTop > start && scrollTop < end) {
						this.clickId = this.categoryList[i].category_id
					}
				}
			},
			toBuy() {
				let tobuy = ()=> {
					if (getApp().globalData.orderData.food_list.data.length <= 0) {
						uni.showToast({
							'title': '请选择菜品',
							'icon': 'none'
						})
						return;
					}
					uni.navigateTo({
						url: '/pages/cart/cart?desk_id='+ this.desk_id
					})
				}
				login.getAuth((res) => {
					console.log(res)
					// tobuy()
				},() => {  // 已登录
					tobuy()
				})				
			},			
			reduceFood(key, index) {
				if (this.foodList[key][index].selected_num <= 0) {
					return;
				}
				this.foodList[key][index].selected_num--
			},
			addFood(key, index) {
				this.foodList[key][index].selected_num++
			},
			getRecommendList() {
				uni.request({
					url: 'https://restaurant.lgdweb.com/api/food/recommendList/',
					success: (res) => {
						this.recommendList = res.data.data.recommendList;
					},
					fail: err => {
						console.log('err---', err)
					}
				})
			},
			getFoodList() {
				uni.request({
					url: 'https://restaurant.lgdweb.com/api/food/',
					success: (res) => {
						this.foodList = res.data.data.foodList;
						setTimeout(() => {  // 数据请求完成后获取节点信息
							this.getNodeInfo()
						}, 100)
					},
					fail: err => {
						console.log('err---', err)
					}
				})
			},			
			getCategoryList() {
				uni.request({
					url: 'https://restaurant.lgdweb.com/api/category/',
					success: (res) => {
						this.categoryList = res.data.data.categoryList;
					},
					fail: err => {
						console.log('err---', err)
					}
				})
			}
		},
	}
</script>

<style>
	.recommend {
		margin: 0 4%;
	}
	#cu-avatar{
		width: 70px;
		height: 70px;
	}
	.btn-red {
		width: 100%;
		position: fixed;
		bottom: 0;
		padding: 0 48rpx;
	}
	.cart-count {
		margin-top: 55px;
	    width: 72rpx;
	    height: 40rpx;
	    line-height: 40rpx;
	    background: #F1ECE7;
	    border-radius: 21.6rpx;
	   /* margin-left: 18rpx;
	    margin-right: 18rpx; */
	    text-align: center;
	}
	.subtrcat {
		margin-top: 55px;
		margin-right: 5px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 25px;
		height: 25px;
		border-radius: 50%;
		background-color: #DDDDDD;
	}
	.allPrice {
	     float:left;
	    padding: 0.5rem;
	    font-weight: 100;
	   margin-left: -30rpx;
	   color: #f40;
	  }
	
	

	.plus {
		margin-top: 55px;
		margin-left: 5px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 25px;
		height: 25px;

		border-radius: 50%;
		background-color: #DDDDDD;
	}

	#menu {
		height: 100px;
	}

	.cu-item {
		/* min-height: 50pxpx; */
	}

	.fixed {
		position: fixed;
		z-index: 99;
	}

	.VerticalNav.nav {
		width: 200upx;
		white-space: initial;
		background-color: white;
		border-radius: 10px;
	}

	.VerticalNav.nav .cu-item {
		width: 100%;
		text-align: center;
		background-color: #fff;
		margin: 0;
		border: none;
		height: 50px;
		position: relative;
	}

	.VerticalNav.nav .cu-item.cur {
		background-color: #f1f1f1;
	}

	.VerticalNav.nav .cu-item.cur::after {
		content: "";
		width: 8upx;
		height: 30upx;
		border-radius: 10upx 0 0 10upx;
		position: absolute;
		background-color: currentColor;
		top: 0;
		right: 0upx;
		bottom: 0;
		margin: auto;
	}

	.VerticalBox {
		display: flex;
		height: 92vh;
	}

	.VerticalMain {
		width: 75%;
		border-radius: 10px;
		background-color: #f1f1f1;
		flex: 1;
	}
</style>
